<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>

    <style>
        .container {
            width: 400px;
            /* margin 外边距: 第一个数字:上下外边距  第二个数字:水平外边距.   auto,表示居中  */
            margin: 0 auto;
        }

        h1 {
            text-align: center;
        }
        p {
            text-align: center;
            color: #666;
        }
        .row {
            height: 40px;
            /* 弹性布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }
        .row span {
            width: 100px;
        }
        .row input {
            width: 200px;
            height: 20px;
        }
        .row button {
            width: 308px;
            height: 40px;
            color: white;
            background-color: orange;
            border: none;
        }
        .row button:active {
            background-color: #666;
        }

    </style>

    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交 就会把信息显示在表格中</p>
    
        <div class="row">
            <span>谁: </span> <input type="text"><br>
            
        </div>

        <div class="row">
            <span>对谁: </span> <input type="text"><br>
        </div>

        <div class="row">
            <span>说: </span> <input type="text"><br>
        </div>
    
        <div class="row">
            <button>提交</button>
        </div>

    </div>

    <!-- 下面的第四步 要用到 ajax, 引入 jquery 依赖 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">
    </script>
    
    <script>
        let container = document.querySelector('.container');
        let button = document.querySelector('button');
        button.onclick = function() {
            // 1. 获取到输入框的内容.
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value; // 第一个输入框的值.
            let to = inputs[1].value; // 第二个输入框的值.
            let message = inputs[2].value; // 第三个输入框的值.
            // console.log(from + "->" + to + "->" + message);
            if(from == '' || to == '' || message == '') {
                alert("请输入完整的内容!")
                return;
            }
            // 2. 构造新的div 用来保存用户提交的内容
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + " 对 " + to + " 说 " + message;
            container.appendChild(rowDiv);

            // 3. 提交完之后, 清空输入框的内容.
            for (let i = 0; i < inputs.length; ++i) {
                inputs[i].value = '';
            }

            // 构建 json 对象. 
            let data = {
                "from": from,
                "to": to,
                "message": message
            };
            // 4. 点击发送按钮, 给服务器构造发送 post 请求.
            $.ajax({
                // 请求类型.
                type: 'post',
                // 路径. 此处是相对路径.
                url: 'message',
                // body 的内容.
                data: JSON.stringify(data), // json 中把对象转为字符串. 与Jackson的writeValueASString是一样的.
                                            // JSON.parse 和 Jackson 里的 readValue 是一样的.
                contentType: "application/json; charset=utf8",
                success: function(body) {
                    console.log("提交数据成功!");
                }
            });

        }
        // 直接写在 script 标签里的代码, 都是在页面加载的时候执行的.
        // 来获取服务器的数据.
        function getMessage() {
            $.ajax ({
                type: 'get',
                url: 'message',
                success: function(body) {
                    // 此处的参数 body 就是响应的 body 内容.--> json 数组.
                    // jquery 非常智能的把 json 数组解析为了 json 对象数组.
                    // (如果 jquery 没做这个事情, 就需要使用 JSON.parse 来完成.)
                    // 但有个前提条件: 响应的 Content-Type 得是 application/json.

                    let container = document.querySelector('.container');
                    for(let i = 0; i < body.length; ++i) {
                        let message = body[i];
                        // 根据这个元素来构造一个 div.row 来容纳数据.
                        let row = document.createElement('div');
                        row.className = 'row';
                        row.innerHTML = message.from + " 对 " + message.to + " 说 " + message.message;
                        container.appendChild(row);
                    }
                }
            });
        }

        getMessage(); // 调用函数.
    </script>
</body>
</html>